<template>
  <div class="wrapper">
    <div class="container">
     <!-- 0-23小时的市电 -->
    <div class="box">
      <div id="city_e" ref="city_eRef" class="chart"></div>
    </div>
    <!-- 网络消耗电力组成 -->
    <div class="box pie-container">
      <div id="pieChartOpt1" ref="pieChartOpt1Ref" class="pie-chart"></div>
      <div id="pieChartOpt2" ref="pieChartOpt2Ref" class="pie-chart"></div>
      <div id="pieChartOpt3" ref="pieChartOpt3Ref" class="pie-chart"></div>
    </div>
    <!-- 三种情况的碳效折线图 -->
    <div class="box pie-container">
      <div id="CO2" ref="CO2Ref" class="chart"></div>
    </div>
    <!-- 基站速率上下行MAC -->
    <div class="box">
      <div id="throughputChart" ref="throughputChartRef" class="chart"></div>
    </div>
    <!-- 各个基站整体功耗展示-->
    <div class="box">
      <div style="width:50px">
        <el-radio-group v-model="curStation" @change="selectStation">
          <el-radio :value=index v-for="(item,index) in stationArr" >基站{{ index }}</el-radio>
        </el-radio-group>
      </div>
      <div id="powerConsumptionChart" ref="powerConsumptionChartRef" class="chart"></div>
    </div>
    <!-- 各个基站光伏消纳能力展示 0-23 百分比  -->
    <div class="box">
      <div id="solarConsumptionChart" ref="solarConsumptionChartRef" class="chart"></div>
    </div>
  </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import useResult from '@/service/result';
import useWs from '@/service/websocket';
import useBaseData from '@/service/baseData';
import { watch } from 'vue';
const wsStore = useWs()
const resultStore = useResult()
const baseDataStore = useBaseData()
const pieChartOpt1Ref = ref(null);
const pieChartOpt2Ref = ref(null);
const pieChartOpt3Ref = ref(null);
const powerConsumptionChartRef = ref(null);
const solarConsumptionChartRef = ref(null);
const throughputChartRef = ref(null)
const city_eRef = ref(null);
const CO2Ref = ref(null);
//0-23 市电
const city_eOption = {
  title: {
    text: '网络消耗的市电',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  legend: {
    orient: 'vertical',
    right: '20px',
    top: '20px',
    textStyle: { color: '#333' },
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    name: '时间', // 横坐标标题
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '用户关联+基站休眠',
      type: 'bar',
      data: [],
      itemStyle: { color: '#5470c6' },
    },
    {
      name: '仅用户关联',
      type: 'bar',
      data: [],
      itemStyle: { color: '#91cc75' },
    },
    {
      name: '仅基站休眠',
      type: 'bar',
      data: [],
      itemStyle: { color: '#E9EE7E' },
    },
  ],
};
let city_eChart
const initcity_e = () => {
  const curData = resultStore.getDataByName('city_e')
  city_eOption.xAxis.data.length = 0
  for(let i=0;i<curData.number;i++){
    city_eOption.xAxis.data.push(i)
  }
  city_eOption.series[0].data = curData.result_optimal
  city_eOption.series[1].data = curData.result_unsleep
  city_eOption.series[2].data = curData.result_without_association
  city_eChart.setOption(city_eOption);
};
//消耗电力组成
const pieOption = {
  title: {
    text: '网络消耗的电力结构组成',
    left: 'center',
  },
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', left: 'left' },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 0, name: '市电' },
        { value: 0, name: '光伏' },
        // { value: 580, name: '电池' },
      ],
      label: {
        show: true, // 显示标签
        position: 'outsude', // 在饼图内部显示标签
        formatter: '{b}：{d}%'
      },
      emphasis: {
        itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' },
      },
    },
  ],
};
let pieChart1
let pieChart2
let pieChart3
const initpieChartOpt1 = () => {
  const consume_pv = resultStore.getDataByName('consume_pv')
  const city = resultStore.getDataByName('city_e')
  let pv_cnt = 0
  let city_e_cnt = 0
  consume_pv.result_optimal.forEach(element => {
    pv_cnt += element
  });
  city.result_optimal.forEach(element => {
    city_e_cnt += element
  });
  pieOption.title.text = '用户关联+基站休眠'
  pieOption.series[0].data[0].value = city_e_cnt
  pieOption.series[0].data[1].value = pv_cnt
  pieChart1.setOption(pieOption);
};
const initpieChartOpt2 = () => {
  const consume_pv = resultStore.getDataByName('consume_pv')
  const city = resultStore.getDataByName('city_e')
  let pv_cnt = 0
  let city_e_cnt = 0
  consume_pv.result_unsleep.forEach(element => {
    pv_cnt += element
  });
  city.result_unsleep.forEach(element => {
    city_e_cnt += element
  });
  pieOption.title.text = '仅用户关联'
  pieOption.series[0].data[0].value = city_e_cnt
  pieOption.series[0].data[1].value = pv_cnt
  pieChart2.setOption(pieOption);
};
const initpieChartOpt3 = () => {
  const consume_pv = resultStore.getDataByName('consume_pv')
  const city = resultStore.getDataByName('city_e')
  let pv_cnt = 0
  let city_e_cnt = 0
  consume_pv.result_without_association.forEach(element => {
    pv_cnt += element
  });
  city.result_without_association.forEach(element => {
    city_e_cnt += element
  });
  pieOption.title.text = '仅基站休眠'
  pieOption.series[0].data[0].value = city_e_cnt
  pieOption.series[0].data[1].value = pv_cnt
  pieChart3.setOption(pieOption);
};
const initPieChart = () =>{
  initpieChartOpt1()
  initpieChartOpt2()
  initpieChartOpt3()
}
//0-23碳效
const CO2_option = {
  title: {
    text: '基站碳效',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '8%',
    bottom: '10%',
    top: '20%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    data: [],
    name: '时间', // 横坐标标题
  },
  yAxis: {
    type: 'value',
    name: '碳效', // 纵坐标标题
  },
  series: [
    {
      name: '用户关联+基站休眠',
      type: 'bar',
      data: [],
      itemStyle: { color: '#5470c6' },
    },
    {
      name: '仅用户关联',
      type: 'bar',
      data: [],
      itemStyle: { color: '#91cc75' },
    },
    {
      name: '仅基站休眠',
      type: 'bar',
      data: [],
      itemStyle: { color: '#E9EE7E' },
    },
  ],
};
let CO2Chart
const initCO2 = ()=> {
  const curData = resultStore.getDataByName('ce')
  CO2_option.xAxis.data.length = 0
  for(let i=0;i<curData.number;i++){
    CO2_option.xAxis.data.push(i)
  }
  CO2_option.series[0].data = curData.result_optimal
  CO2_option.series[1].data = curData.result_unsleep
  CO2_option.series[2].data = curData.result_without_association
  CO2Chart.setOption(CO2_option)
}
//基站上下行Mac速率
const throughputOption = {
  title: {
    text: '实物基站上行下行吞吐量展示',
    left: 'center',
    top: '10%',
    textStyle: {
      fontSize: 22,  // 标题的字体大小
      fontWeight: 'bold',
      color: '#333',
    },
  },
  graphic: [
    // 上行吞吐量框
    {
      type: 'rect',
      left: 'center',
      top: '40%',  // 框的位置
      shape: {
        width: 300,  // 框的宽度
        height: 60,  // 框的高度
      },
      style: {
        fill: 'none',
        stroke: '#4e73df',  // 框的颜色
        lineWidth: 2,  // 框的宽度
      },
    },
    {
      type: 'text',
      left: 'center',
      top: '46%',  // 文字的垂直位置略微下移
      style: {
        text: `基站上行吞吐量:0`,
        font: '20px Arial',
        fill: '#333',
        textAlign: 'center',  // 水平居中
        verticalAlign: 'middle',  // 垂直居中
      },
    },
    // 下行吞吐量框
    {
      type: 'rect',
      left: 'center',
      top: '60%',  // 框的位置
      shape: {
        width: 300,  // 框的宽度
        height: 60,  // 框的高度
      },
      style: {
        fill: 'none',
        stroke: '#4e73df',  // 框的颜色
        lineWidth: 2,  // 框的宽度
      },
    },
    {
      type: 'text',
      left: 'center',
      top: '66%',  // 文字的垂直位置略微下移
      style: {
        text: `基站下行吞吐量:0`,
        font: '20px Arial',
        fill: '#333',
        textAlign: 'center',  // 水平居中
        verticalAlign: 'middle',  // 垂直居中
      },
    },
  ],
  xAxis: {
    type: 'category',
    data: [],  // 隐藏 x 轴
    show: false,
  },
  yAxis: {
    type: 'value',
    show: false,  // 隐藏 y 轴
  },
  series: [
    {
      name: '吞吐量',
      type: 'bar',
      data: [],
      itemStyle: { color: 'transparent' },  // 隐藏柱状图
      show: false,
    },
  ],
};
let throughputChar
const initThroughputChart = () => {
  throughputOption.graphic[1].style.text = `基站上行Mac速率 ${wsStore.data.UL_MAC}`
  throughputOption.graphic[3].style.text = `基站下行Mac速率 ${wsStore.data.DL_MAC}`
  throughputChar.setOption(throughputOption);
};
//各个基站功耗。用户选择一个基站，展示三种情况的功耗
const powerConsumptionOption = {
  title: {
    text: '基站功耗展示',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  xAxis: {
    type: 'category', // 设置为类目轴
    data: [], // 原有的分类数据
    name: '时间',
    // axisLabel: { rotate: 45 }, // 防止标签重叠
  },
  yAxis: {
    type: 'value',
    name: '功耗',
  },
  series: [
    {
      type: 'bar', //柱状图
      data: [], 
      name:'用户关联+基站休眠'
    },
    {
      type: 'bar', //柱状图
      data: [], 
      name:"仅用户关联"
    },
    {
      type: 'bar', //柱状图
      data: [], 
      name:"仅基站休眠"
    },
  ],
};
let powerConsumptionChart
//用户选择的基站序号
let curStation = ref(0)
const stationArr = new Array(baseDataStore.number).fill(1)
console.log(stationArr)
//根据选择的基站渲染图表
const initPowerConsumptionChart = () => {
  console.log('选择基站',curStation.value)
  const curData = resultStore.getDataByName('bs_consumption')
  //调节x轴
  powerConsumptionOption.xAxis.data.length = 0
  for(let i=0;i<curData.number;i++){
    powerConsumptionOption.xAxis.data.push(i)
  }

  powerConsumptionOption.series[0].data.length = 0
  curData.result_optimal.forEach((arr,i)=>{
    powerConsumptionOption.series[0].data.push(arr[curStation.value])
  })

  powerConsumptionOption.series[1].data.length = 0
  curData.result_unsleep.forEach((arr,i)=>{
    powerConsumptionOption.series[1].data.push(arr[curStation.value])
  })
  
  powerConsumptionOption.series[2].data.length = 0
  curData.result_without_association.forEach((arr,i)=>{
    powerConsumptionOption.series[2].data.push(arr[curStation.value])
  })
  powerConsumptionChart.setOption(powerConsumptionOption);
};
//用户选择基站触发
const selectStation =() =>{
  initPowerConsumptionChart()
}
//光伏消纳率
const solarConsumptionOption = {
  title: {
    text: '基站光伏消纳能力展示',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'shadow' },
  },
  xAxis: {
    type: 'category', // 设置为类目轴
    data: [],
    name: '时间',
    // axisLabel: { rotate: 45 }, // 防止标签重叠
  },
  yAxis: {
    type: 'value',
    name: '光伏消纳率',
  },
  series: [
  {
      name: '用户关联+基站休眠',
      type: 'line',
      data: [],
    },
    {
      name: '仅用户关联',
      type: 'line',
      data: [],
    },
    {
      name: '仅基站休眠',
      type: 'line',
      data: [],
    },
  ],
};
let solarConsumptionChart
const initSolarConsumptionChart = () => {
  const curData = resultStore.getDataByName('pv_rate')
  solarConsumptionOption.xAxis.data.length = 0
  for(let i=0;i<curData.number;i++){
    solarConsumptionOption.xAxis.data.push(i)
  }
  solarConsumptionOption.series[0].data = curData.result_optimal
  solarConsumptionOption.series[1].data = curData.result_unsleep
  solarConsumptionOption.series[2].data = curData.result_without_association
  solarConsumptionChart.setOption(solarConsumptionOption);
};

watch(resultStore.data,()=>{
  console.log('')
  initcity_e();
  initPieChart()
  initCO2()
  initPowerConsumptionChart();
  initSolarConsumptionChart();
})
watch(wsStore.data,()=>{
  initThroughputChart();
})
onMounted(() => {
  city_eChart = echarts.init(city_e)
  initcity_e();
  pieChart1 = echarts.init(pieChartOpt1Ref.value);
  pieChart2 = echarts.init(pieChartOpt2Ref.value);
  pieChart3 = echarts.init(pieChartOpt3Ref.value);
  initPieChart()
  CO2Chart = echarts.init(CO2Ref.value)
  initCO2()
  throughputChar = echarts.init(throughputChartRef.value) 
  initThroughputChart();
  powerConsumptionChart = echarts.init(powerConsumptionChartRef.value) 
  initPowerConsumptionChart();
  solarConsumptionChart = echarts.init(solarConsumptionChartRef.value);
  initSolarConsumptionChart();
});
</script>

<style scoped>
.wrapper{
  width: 100vw;
  height: 100vh;
  overflow-y: auto; /* 内容超出时支持滚动 */

}
.container {
  padding: 10px;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  gap: 20px; /* 每个图表之间的间距 */
  height: auto; /* 占满屏幕高度 */
  box-sizing: border-box;
}

/* 每个图表的容器 */
.box {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 100%; /* 宽度充满容器 */
  height: 400px; /* 每个图表的高度设置为400px */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 饼图容器，保持并排显示 */
.pie-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 饼图之间的间距 */
  width: 100%; /* 确保容器宽度为100% */
}

/* 每个饼图的容器 */
.pie-chart {
  width: 48%; /* 宽度为父容器的48% */
  height: 100%; /* 高度填充父容器，保持一致性 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 图表容器，确保图表填满容器并居中 */
.chart {
  width: 100%;
  height: 100%; /* 让图表填满容器的高度 */
}
</style>